<template>
    <div class="login-home">

        <div class="login-container">

            <div class="left-pic">
                <img src="../../../public/loginPic.png" alt="">
            </div>

            <div class="right-login">

                <div class="title-info">
                    网上药店后台管理系统
                </div>

                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" labelPosition="right" label-width="80px">
                    <!-- 表单验证 el-form 属性:model="ruleForm" -->
                    <!-- el-form-item属性 prop="userName" -->
                    <el-form-item prop="userName" label="用户名:">
                        <!-- el-input属性 v-model="ruleForm.userName"  -->
                        <el-input v-model="ruleForm.userName" autocomplete="on" placeholder="用户名" clearable>
                            <template #prefix>
                                <el-icon>
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="pwd" label="密码:">
                        <el-input v-model="ruleForm.pwd" placeholder="密码" type="password" autocomplete="on" show-password
                            clearable>
                            <template #prefix>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="VerificationCode" label="验证码:">
                        <el-input class="VerificationCode" v-model="ruleForm.VerificationCode" placeholder="验证码"
                            type="password" autocomplete="on" clearable show-password>
                            <template #prefix>
                                <el-icon>
                                    <Refresh />
                                </el-icon>
                            </template>
                        </el-input>
                        <img src="https://img2.baidu.com/it/u=3752415862,2279034296&fm=253&fmt=auto&app=138&f=JPEG?w=716&h=425"
                            alt="">
                    </el-form-item>

                    <div class="regCheck">
                        <el-form-item prop="" label="">
                            <el-checkbox v-model="checked1" label="是否选择记住密码" size="large" />
                        </el-form-item>

                        <a href="#" class="linkToReg">注册账号</a>
                    </div>

                    <!-- <el-form-item label="选择用户角色">
                    <el-radio-group v-model="role">
                        <el-radio :label="0" size="large">管理员登录</el-radio>
                        <el-radio :label="1" size="large">普通用户登录</el-radio>
                    </el-radio-group>
                    </el-form-item> -->

                    <el-form-item>
                        <el-button type="primary" @click="submitForm">登录</el-button>
                        <!-- <el-button @click="resetForm">重置</el-button> -->
                    </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'
import { reactive, ref } from 'vue'
import { userLogin } from '@/api/userLogin';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';



const router = useRouter()
const checked1 = ref(true)


// 登录表单 验证
const ruleFormRef = ref()

// 定义提交的数据
const ruleForm = reactive({
    userName: '',
    pwd: '',
    VerificationCode: ''
})

// 定义验证规则
const rules = reactive<FormRules>({
    userName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '到8位字母下划线数字组成' },
        {
            pattern: /^\w{4,8}$/,
            message: '4到8位字母下划线数字组成',
        }
    ],
    VerificationCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        {
            pattern: /^[0-9]{4}$/,
            message: '任意4位数字组成',
        }
    ],
})

// 提交表单
const submitForm = () => {
    ruleFormRef.value.validate().then((valid: any) => {
        if (valid) {
            userLogin().then(res => {
                if (res.data.code === 200) {
                    // 缓存  用于 登录验证
                    const { token } = res.data.data
                    localStorage.setItem('token', token)
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                        duration: 2000,
                        onClose: () => {
                            router.replace('/home')
                        }
                    })
                }
            })
        }
    }).catch(() => {
        ElMessage({
            message: '表单验证失败，请验证账号、密码、验证码是否正确！',
            type: 'error',
        })
    })
}


// else {
//             ElMessage({
//                 message: '表单验证失败，请验证账号、密码、验证码是否正确！',
//                 type: 'error',
//             })
//         }
    // }).catch(() => {
    //     ElMessage({
    //         message: '表单验证失败',
    //         type: 'error',
    //         duration: 700,
    //         onClose: () => {
    //             router.go(0)
    //         }
    //     })

    // })





</script>

<style scoped lang="scss">
.login-home {
    width: 100vw;
    height: 100vh;
    // background-color: #DA2222;
    background: url(https://gitee.com/ZhangZongyi999/vue-back-stage-management/raw/master/src/assets/imgs/loginPic.png) no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;

    .login-container {
        background-color: #fafafa;
        width: 520px;
        height: 350px;
        padding: 0 50px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 18px;

        .left-pic {
            img {
                width: 176px;
                height: 148px;
            }
        }

        .right-login {
            .title-info {
                text-align: center;
                padding: 25px 0;
                font-size: 30px;
                font-weight: bold;
            }

            .el-button {
                flex: 1;
            }

            .VerificationCode {
                flex: 0.99;
            }

            img {
                padding-left: 8px;
                height: 29px;
            }

            .regCheck {
                display: flex;
                justify-content: space-between;

                // align-items: center;
                // line-height: 20px;
                a {
                    text-align: center;
                    line-height: 40px;
                    // align-self: center;
                    color: red;
                    font-size: 13px;

                }
            }
        }
    }
}
</style>